package myJs.user.home

import myJs.Implicits._
import myJs.{CpLayer, MyPage}
import myJs.api.Api
import myJs.assets.assetsCss
import myJs.cps._
import myJs.myPkg.jquery._
import myJs.myPkg.{BackstretchOptions, ReactRouterDOM}
import org.scalajs.dom.{URLSearchParams, document}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Pojo.EmailData
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.web.html.{a, _}
import typings.csstype.csstypeStrings

import scala.scalajs.js.JSConverters._

@react object Cp {

  val curPage = Home

  type Props = Unit

  case class GVerify(kind: String, height: Double, width: Double)

  sealed trait ActiveStatus

  object NotGet extends ActiveStatus

  object HasActived extends ActiveStatus

  object NoActived extends ActiveStatus

  val component = FunctionalComponent[Props] { props =>
    val navigate = ReactRouterDOM.useNavigate()
    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val email = searchParams.get("email")
    val (activeStatus, setActiveStatus) = useState(NotGet: ActiveStatus)
    val (hasPerm, setPerm) = useState(true)

    object FTool {

      def confirmActive = () => {
        val request = EmailData(email = email)
        Api.registerActive(request).map { response =>
          val curActiveStatus = response.hasActived match {
            case true  => HasActived
            case false => NoActived
          }
          setActiveStatus(curActiveStatus)
        }
        ()
      }
    }

    useEffect(
      () => {
        FTool.confirmActive()
      },
      List()
    )

    CpLayer(title = curPage.titleStr)(
      div(
        className := "page-content",
        div(
          className := "page-bar",
          ul(
            className := "page-breadcrumb",
            li(
              i(className := "fa fa-home"),
              " ",
              a(href := "#", "首页")
            )
          )
        ),
        div(
          className := "row-fluid",
          if (hasPerm) {
            div(
              className := "row",
              div(
                className := "col-sm-3",
                form(
                  className := "well",
                  h3("关于"),
                  p(
                    style := Style(lineHeight = "1.5em"),
                    div("软件名称：肝纤维化和肝硬化风险计算软件"),
                    div("软件型号：LiveForest"),
                    div("完整版本：V1.0.0.0"),
                    div("发布版本：V1"),
                    div("制造商：深圳市绘云生物科技有限公司"),
                  ),
                  p(
                    "本软件在使用过程中出现任何运行错误，请操作者通过以下邮件",
                    a(href := "mailto:huiyun@hmibiotech.com", "huiyun@hmibiotech.com"),
                    "进行反馈。"
                  )
                )
              ),
              div(
                className := "col-sm-7",
                h2(style := Style(color = "#487EB3"), "简介"),
                p(
                  "欢迎使用 ",
                  strong("LiveForest，"),
                  " 本软件用于对 ",
                  strong("肝纤维化"),
                  " 和 ",
                  strong("肝硬化"),
                  " 的风险评估。"
                ),
                p(
                  "本软件适用的分析样本为",
                  b("18岁及以上的成年人样本"),
                  "，",
                  b("不包含孕妇样本"),
                  "。"
                ),
                p(
                  "我们构建了3个 ",
                  strong("随机森林模型(Random Forest，RF)"),
                  " 旨在: 1）诊断慢性肝病；2）区分肝纤维化和肝硬化；3）区分早期和晚期肝纤维化。"
                ),
                p(
                  strong("- 模型-1"),
                  " 用于诊断 ",
                  strong("慢性肝病"),
                  " ；"
                ),
                p(
                  strong("- 模型-2"),
                  " 用于区分 ",
                  strong("肝纤维化"),
                  " 和 ",
                  strong("肝硬化"),
                  " ；"
                ),
                p(
                  strong("- 模型-3"),
                  " 用于区分 ",
                  strong("早期肝纤维化"),
                  " 和 ",
                  strong("晚期肝纤维化"),
                  " 。"
                ),
                p(
                  img(src := s"${Api.images}/WorkFlow_1.jpeg")
                ),
                h2(style := Style(color = "#487EB3"), "操作说明"),
                p(
                  "预测："
                ),
                ol(
                  li("点击左侧导航栏的“预测”分页；"),
                  li("在页面输入各项指标的值；"),
                  li("点击“运行”按钮；"),
                  li("页面下方会显示相应结果；"),
                  li("单击“导出报告”按钮下载pdf格式的预测报告。")
                ),
                p(
                  "批量预测："
                ),
                ol(
                  li("点击左侧导航栏的“批量预测”分页；"),
                  li("在页面上传符合格式要求的.xlsx文件；"),
                  li("点击“运行”按钮；"),
                  li("点击\"下载\"按钮下载结果。")
                )
              )
            )
          } else {
            div(
              className := "row",
              div(
                className := "col-sm-6",
                h4(
                  b("您无此权限使用该系统，请与管理员联系!")
                )
              )
            )
          }
        )
      )
    )

  }

}
